<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <h3 style="text-align: center">载荷库</h3>
  <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="80">
    <el-form-item label="参数" prop="parameter">
      <el-select v-model="queryParams.parameter" @change="toggleParamForChart"> 
        <el-option v-for="item in xDataList" :key="item.id" :label="item.name" :value="item.id">  
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div v-if="loadChartFlag" ref="loadChart" id="LoadChart" style="width: 100%;height: 300px;"></div>
</template>

<script setup>
// import * as VChart from '@visactor/vchart'; statisticalAnalysis
import VChart from '@visactor/vchart';
import { getMannedLoadList } from '@/api/mannedLoad';
const CONTAINER_ID = ref('LoadChart');
const loadDataList = ref([]);
const dataTotal = ref(0);
const loadChart = ref(null);
const loadChartFlag = ref(false);
const pageParams = ref({
  pageNum: 1,
  pageSize: 9999
})
const xDataList = ref([{
  name: '重量（kg）',
  prop: 'g',
  id: 1,
},{
  name: '重心（m）-X',
  prop: 'x',
  id: 2,
},{
  name: '重心（m）-Y',
  prop: 'y',
  id: 3,
},{
  name: '重心（m）-Z',
  prop: 'z',
  id: 4,
},{
  name: '惯量（kg*k^2）-Ixx',
  prop: 'ixx',
  id: 5,
},{
  name: '惯量（kg*k^2）-Iyy',
  prop: 'iyy',
  id: 6,
},{
  name: '惯量（kg*k^2）-Ixz',
  prop: 'ixz',
  id: 7,
},{
  name: '惯量（kg*k^2）-Iyz',
  prop: 'iyz',
  id: 8,
},{
  name: '惯量（kg*k^2）-Ixy',
  prop: 'ixy',
  id: 9,
},{
  name: '惯量（kg*k^2）-Izz',
  prop: 'izz',
  id: 10,
}]);
const queryParams = ref({
  parameter: 1
}); 
const renderChart = async (data, total) => {
  loadChartFlag.value = true;
  await nextTick();
  let xData = [];
  let fItem = xDataList.value.find(item => item.id === queryParams.value.parameter);
  const { title, name, prop } = fItem;
  for (let i = 0; i < total; i++) {
    xData.push({x: ''+data[i].no, type: prop, value: data[i][prop]})
  }
  const spec = {
    type: 'line',
    data: {
      values: xData
    },
    title: {
      visible: true,
      text: '空机载荷'
    },
    // stack: true,
    xField: 'x',
    yField: 'value',
    seriesField: 'type',
    invalidType: 'link',
    lineLabel: { visible: true },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
  };
  
  let vchart = new VChart(spec, { dom: CONTAINER_ID.value });
  vchart.renderSync();
  window['vchart'] = null;
  window['vchart'] = vchart;
}

const getLoadData = () => {
  loadChartFlag.value = true;
  getMannedLoadList(pageParams.value).then((res) => {
    const { rows, total } = res;
    loadDataList.value = rows;
    dataTotal.value = total;
    renderChart(loadDataList.value, total);
  })
}
const toggleParamForChart = () => {
  loadChartFlag.value = false;
  nextTick(() => {
    renderChart(loadDataList.value, dataTotal.value);
  });
  
}

onMounted(() => {
  getLoadData();                         
});                                                                                   
                                                         
</script>

<style lang="scss" scoped>

</style>